<template>
  <div id="main" style="height: 100%">
    <mavon-editor v-model="content" style="height: 100%" :ishljs = "true" ref=md @imgAdd="$imgAdd" ></mavon-editor>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'wangeditor',
  data() {
    return {
      editor: null,
      editorContent: ''
    }
  },
  props: ['content','catchData'],    // 接收父组件的方法
  watch: {
    content (newvalue) {
      console.log(newvalue)
      this.catchData(newvalue)
    }
  },
  methods: {
    // 绑定@imgAdd event
    $imgAdd(pos, $file){
        // 第一步.将图片上传到服务器.
       var formdata = new FormData();
       formdata.append('files', $file);
       const session_id = this.Cookies.get('session')
       formdata.append('session_id',session_id)
       axios({
           url: this.$imgApi,
           method: 'post',
           data: formdata,
           headers: { 'Content-Type': 'multipart/form-data' },
       }).then((url) => {
           // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
           /**
           * $vm 指为mavonEditor实例，可以通过如下两种方式获取
           * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
           * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
           */
           let imgurl = this.$imgUrl + url.data.data
           console.log(this.$refs.md)
           this.$refs.md.$img2Url(pos, imgurl);
       })
    }    
  },
  mounted() {
  
  },
}
</script>